/* honestly all these styles are a bit of a clusterfuck */

@font-face {
	font-family: 'Phantom Sans';
	src: url('https://assets.hackclub.com/fonts/Phantom_Sans_0.7/SemiBold.woff')
		format('woff'),
		url('https://assets.hackclub.com/fonts/Phantom_Sans_0.7/SemiBold.woff2')
		format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

.cover-bg {
	display: none;
}

header {
	background: #212529;
	background: linear-gradient(90deg, #212529 28px, transparent 1%) center, linear-gradient(#212529 28px, transparent 1%) center, #495057;
    background-size: 30px 30px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #ced4da;
	padding: 100px 0;
	position: relative;

	& p {
		margin: 0;
	}

	& .editions {
		background: #343a40;
		width: fit-content;
		padding: 6px 30px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 4.4em;
		position: absolute;
		top: calc(100% - 2.2em);
		border-radius: 2.2em;

		& .label {
			font-size: 0.9em;
			color: #868e96;
			line-height: 1.2;
		}

		& a {
			margin: 0; /* on firefox, the negative margin breaks layout with fit-content */
		}

		& strong {
			color: #dee2e6;
		}
	}

	& h1 {
		font-family: var(--font-main-title);
		font-size: 2.5em;
		font-weight: 600;
		margin: 0;
		margin-bottom: 14px;
	}

	& .content p {
		line-height: 1.7;
		font-size: 1.05em;
	}

	& a, & a:not([href^="#"]):visited {
		--color: currentColor;
		--hover-background: #343a40;
		text-decoration: underline;
		text-decoration-color: #9775fa;
		text-underline-offset: 4px;
	}

	& .editions a, & .editions a:not([href^="#"]):visited {
		--hover-background: #495057;
	}
}

main {
	display: flex;
	flex-direction: column;
	align-items: center;
}

h2 {
	margin-top: 140px;
}

h2:first-of-type {
	margin-top: 80px;
}

@page { 
    size: auto;
    margin: 0.8in 0in;
}

@media print {
	header {
		background: transparent;
		padding: 0;
		position: static;

		& .editions {
			display: none;
		}

		& h1 {
			margin-top: 32vh;
			font-size: 3.25em;
		}

		& .byline {
			font-size: 1.5em;
			color: #000000;
		}

		& a {
			text-decoration: none;
		}
	}

	.cover-bg {
		display: block;
		position: absolute;
		object-fit: contain;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
		opacity: 0.75;
	}

	h2, h2:first-of-type {
		margin-top: 0;
		font-size: 1.9em;
		margin-bottom: 35px;
		text-align: center;
		page-break-before: always;
		page-break-after: avoid;
		page-break-inside: avoid;
	}

	h3 {
		font-size: 1.5em;
		margin-bottom: 20px;
		margin-top: 40px;
	}

	h4 {
		font-size: 1.3em;
		margin-bottom: 15px;
	}

	.content {
		/* All widths are calculated based on first-page margins, so our content gets
		 * cut off if we do layout with normal @page rules. Instead, we use 0in margin
		 * in the @page and add in our 1.2in horizontal margin here. */
		max-width: calc(100% - 1.6in);
	}
}